<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<!-- css提供五个定位:①浮动定位   float属性
		                            none默认不浮动
									left左浮动
									right右浮动 
									 clear属性
									作用：清除浮动
									left 左浮动
									right 右浮动
									 both 左右浮动
		
		        概念:让元素脱离文档流的一种定位方式
				     浮动的元素可以向左,向右
					 通常用于左右布局,图片与文本环绕...
				 注意：一旦元素加浮动,元素变成块级元素
		                    ②相对定位
							③绝对定位
							④普通流(文档流)定位
							按照元素分类进行定位
							⑤固定定位
							元素定死在页面不动
					主要功能：页面元素布局		
		-->
		
		<style>
		.d4{
			background-color: #fff000;
			/* 清除浮动 */
			clear: both;
		}
			
		</style>
		<link rel="stylesheet" href="css/定位.css" />
	</head>
	<body>
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		<div class="d4">4</div>
	</body>
</html>